<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="ap">
        <button v-on:click="counter += 1">增加1</button>
        <p> {{counter}} </p>
        <button v-on:click="greet">Greet</button>
        <button v-on:click="greet('Hello')">说Hello</button>
        <button v-on:click="greet('nihao')">说nihao</button>

        <!-- 事件修饰符 -->
        <!-- 阻止单击事件冒泡 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符可以串联  -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件侦听器时使用事件捕获模式 -->
        <div v-on:click.capture="doThis">...</div>
        <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
        <div v-on:click.self="doThat">...</div>
        <!-- click 事件只能点击一次，2.1.4版本新增 -->
        <a v-on:click.once="doThis"></a>

        <!-- 按键修饰符 -->
        <!-- 同上 -->
        <input v-on:keyup.enter="submit">
        <!-- 缩写语法 -->
        <input @keyup.enter="submit">
        <!-- 
        .enter
        .tab
        .delete (捕获 "删除" 和 "退格" 键)
        .esc
        .space
        .up
        .down
        .left
        .right
        .ctrl
        .alt
        .shift
        .meta -->
    </div>
</body>
<script>
    new Vue({
        el:'#ap',
        data:{
            // 初始的，可改的都写在这里
            counter:0,
            name:"Vue"
        },
        methods:{
            greet: function(){
                alert("Hello"+this.name)
            },
            greet:function(mes){
                alert(mes)
            }
        }
        
    })
</script>
</html>